<template>
    <div>
      <!-- 面包屑导航 -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">商品管理</a></el-breadcrumb-item>
        <el-breadcrumb-item>商品分类</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 卡片视图区域 -->
      <el-card>
        <!-- 添加分类按钮区域 -->
        <el-row>
          <el-col>
            <el-button type="primary" @click="showCateEditDialog()">添加分类</el-button>
          </el-col>
        </el-row>
        <!-- 分类表格  -->
        <vxe-table border :tree-config="treeConfig" :data="cateList" :row-config="{ keyField: 'cat_id' }">
          <vxe-column width="70" align="center" title="排序" header-align="center">
            <template #default="scope">
              <template v-if="scope.row.cat_level === 0">
                {{ scope.$rowIndex + 1 }}
              </template>
            </template>
          </vxe-column>
          <!-- 此列为展开折叠列 -->
          <vxe-column field="cat_name" title="分类名称" tree-node></vxe-column>
          <vxe-column field="cat_deleted" title="是否有效">
            <template #default="scope">
              <el-icon v-if="scope.row.cat_deleted === false" color="green">
                <SuccessFilled />
              </el-icon>
              <el-icon v-else color="red">
                <CircleCloseFilled />
              </el-icon>
            </template>
          </vxe-column>
          <vxe-column field="cat_level" title="排序">
            <template #default="scope">
              <el-tag v-if="scope.row.cat_level === 0">一级</el-tag>
              <el-tag type="success" v-if="scope.row.cat_level === 1">二级</el-tag>
              <el-tag type="warning" v-if="scope.row.cat_level === 2">三级</el-tag>
            </template>
          </vxe-column>
          <vxe-column title="操作">
            <template #default="{ row }">
              <el-button size="small" type="primary" :icon="Edit" @click="showCateEditDialog(row.cat_id)"></el-button>
              <el-button size="small" type="danger" :icon="Delete" @click="deleteRole(row.cat_id)"></el-button><!--========这里是调用的实参-->
            </template>
          </vxe-column>
        </vxe-table>
        <!-- 分页 -->
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          v-model:current-page="pageParams.pagenum"
          :page-sizes="pageSizes"
          v-model:page-size="pageParams.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </el-card>
      <!-- 编辑分类 -->
      <cate-edit ref="cateEditRef" @getCateList="getCateList"></cate-edit>
    </div>
  </template>
  
  <script setup>
  import { VxeTable, VxeColumn, VxeUI } from 'vxe-table'
  import { getCateListApi } from '@/api/cate'
  import { ref, reactive } from 'vue'
  import { Edit, Delete, SuccessFilled, CircleCloseFilled } from '@element-plus/icons-vue'
  import CateEdit from './components/CateEdit.vue'
  import { deleteRoleApi } from '../../api/cate';
  
  // 分页大小
  const pageSizes = ref([5, 10, 15, 20])
  // 定义分页查询参数
  const pageParams = ref({
    type: 3,
    pagenum: 1,
    pagesize: pageSizes.value[0]
  })
  
  // 获取分类列表数据
  const cateList = ref([])
  const total = ref(0)
  const getCateList = async () => {
    const data = await getCateListApi(pageParams.value)
    cateList.value = data.result
    total.value = data.total
  }
  getCateList()
  
  // 监听分页参数的变化
  // 每页显示的条数发生改变时触发
  const handleSizeChange = size => {
    pageParams.value.pagesize = size
    getCateList()
  }
  // 当前页码改变时触发
  const handleCurrentChange = page => {
    pageParams.value.pagenum = page
    getCateList()
  }
  
  // 树形配置
  const treeConfig = reactive({
    // 以下3个配置选项只有当返回的数据是列表数据时，才需要配置
    // rowField: 'cat_id',  // 唯一标识
    //  parentField: 'cat_pid' // 父级字段名
    // childrenField: 'children', // 层级关系字段
    // 使用官方vxe-pc-ui里面的图标，需要安装及导入样式
    iconOpen: 'vxe-icon-square-minus',
    iconClose: 'vxe-icon-square-plus'
    // 可以使用iconfont的图标库来自定义
    // iconOpen: 'iconfont icon-caozuo-zhedie ',
    // iconClose: 'iconfont icon-unfolded-s'
  })
  
  // 打开添加或者修改的对话框
  const cateEditRef = ref(null)
  const showCateEditDialog = id => {
    cateEditRef.value.open(id)
  }

// 删除物品对应的分类
  const deleteRole = async id => {//《=======这里是对应的形参
  try {
    await ElMessageBox.confirm('您确定要删除该分类吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })

    console.log(id);//打印ID看看哪里错了
    
    await deleteRoleApi(id)
    ElMessage.success('删除成功')
    getCateList()//《=======调用刷新列表
  } catch (err) {
    ElMessage.info('取消删除')
    console.log(err)
  }
}
  </script>
  
  <style lang="scss" scoped>
  .vxe-table {
    margin-top: 15px;
  }
  </style>